<template>
    <div class="app-container">
      <!-- 侧边导航栏 -->
      <el-menu
      class="sidebar-menu"
      :default-active="$route.path"
      background-color="#2b2f3a"
      text-color="#a6adb5"
      active-text-color="#1890ff"
      router
      unique-opened
    >
      <h2 class="system-title" style="padding-left: 10px;">校园失物招领系统</h2>
      
      <el-menu-item index="/home">
        <el-icon><House /></el-icon>
        <span>首页</span>
      </el-menu-item>

      <el-menu-item index="/profile">
        <el-icon><User /></el-icon>
        <span>个人中心</span>
      </el-menu-item>

      <el-menu-item index="/users">
        <el-icon><Setting /></el-icon>
          <span>用户管理</span>
        </el-menu-item>

      <el-menu-item index="/found">
        <el-icon><Opportunity /></el-icon>
        <span>招领信息管理</span>
      </el-menu-item>

      <el-menu-item index="/claims">
        <el-icon><Box /></el-icon>
        <span>失物信息管理</span>
      </el-menu-item>

      <el-menu-item index="/statistics">
        <el-icon><DataAnalysis /></el-icon>
        <span>数据统计</span>
      </el-menu-item>
    </el-menu>
  
      <!-- 主内容区 -->
      <el-container>
        <el-header class="header">
          <div class="search-bar">
            <el-input 
              v-model="searchKey" 
              placeholder="请输入搜索内容" 
              clearable
              @keyup.enter="handleSearch"
            >
              <template #append>
                <el-button :icon="Search" @click="handleSearch" />
              </template>
            </el-input>
          </div>
          
          <div class="user-info">
             <!-- 添加头像 -->
            <el-avatar 
              :size="32" 
              :src="avatarUrl" 
              style="margin-right: 10px;"
             ></el-avatar>
            <span class="username">{{username}}</span>
            <el-button type="danger" @click="logout" round>退出登录</el-button>
          </div>
        </el-header>
        <el-main class="content">
        <router-view></router-view>
      </el-main>
      </el-container>
    </div>
  </template>
  
  <script setup lang="ts">
 import { ref, watchEffect } from 'vue';
  import { useRouter } from 'vue-router'
  import {
    House,
    User,
    Setting,
    Opportunity,
    Search,
    Box,
    DataAnalysis
  } from '@element-plus/icons-vue'
import Profile from '@/components/Profile.vue';
  
  const searchKey = ref('')
  const router = useRouter()
  const username = ref('');
 const avatarUrl = ref('');
// 监听 localStorage 变化
watchEffect(() => {
    username.value = localStorage.getItem('username') || '管理员'; // 单次设置
    avatarUrl.value = localStorage.getItem('profileImage') 
        || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png';
});
  const handleSearch = () => {
    console.log('搜索关键词:', searchKey.value)
  }
  
  const logout = () => {
    localStorage.clear();
    router.push('/login')
    console.log('退出登录')
  }
  </script>
  
  <style scoped>
  .app-container {
    height: 100vh;
    display: flex;
    padding: 0; /* 移除所有内边距 */
  }
  
  .sidebar-menu {
  width: 240px !important;
  height: 100vh;
  border-right: none;
  text-align: left;
}

.system-title {
  height: 60px;
  display: flex;
  align-items: center;
  padding-left: 10px; /* 减少左侧内边距 */
  color: #fff;
  font-size: 18px;
  border-bottom: 1px solid #404854;
  margin: 0;
  text-align: left;
}

.el-menu-item {
  height: 48px;
  margin: 4px 0;
  padding-left: 10px !important; /* 减少菜单项左侧内边距 */
  justify-content: flex-start;
}

.el-menu-item.is-active {
  background-color: rgba(24, 144, 255, 0.1) !important;
}

.el-menu-item:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.el-sub-menu__title:hover {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

.el-icon {
  font-size: 18px;
  margin-right: 8px; /* 减少图标右侧间距 */
}
  
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,21,41,.08);
    height: 60px;
    padding: 0; /* 移除头部内边距 */
  }
  
  .search-bar {
    width: 400px;
    margin-left: 10px; /* 减少搜索框左侧外边距 */
  }
  
  .user-info {
    display: flex;
    align-items: center;
    gap: 10px; /* 减少元素间距 */
    margin-right: 10px; /* 减少右侧外边距 */
  }
  
  .username {
    color: #333;
    font-weight: 500;
  }
  
  .content {
    background: #f0f2f5;
    padding: 15px; /* 减少内容区内边距 */
    height: calc(100vh - 60px);
  }
  
  .welcome-container {
    height: 100%;
    padding: 0; /* 移除欢迎容器内边距 */
  }
  
  .welcome-card {
    text-align: left;
    padding: 20px; /* 减少卡片内边距 */
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
    margin: 0; /* 移除卡片外边距 */
  }
  
  .welcome-card h1 {
    font-size: 24px; /* 减小标题大小 */
    color: #303133;
    margin-bottom: 15px; /* 减小下边距 */
    text-align: left;
  }
  
  .version {
    color: #909399;
    margin-bottom: 20px; /* 减小下边距 */
    text-align: left;
  }
  
  .copyright {
    color: #909399;
    margin-top: 30px; /* 减小上边距 */
    font-size: 12px; /* 减小字体大小 */
    text-align: left;
  }
  </style>